<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>盒子模型</title>
		<style type="text/css">
			*{margin: 0px;
			padding: 0px;}
			body{font-family: 宋体;
			font-size: 12px;
			margin: 0px auto;
			height: auto;
			width: 760px;
			border: 1px solid #006633;
			}
			#header{height: 100px;
			width: 100%;
			background-color: #00FFFF;
			margin: 0px 0px 3px 0px;
			}
			#nav{height: 25px;
			width: 100%;
			font-size: 14px;
			list-style-type: none;
			}
			#nav li{float: left;
			}
			#nav li a{color: #000000;
			text-decoration: none;
			padding-top: 4px;
			display: block;
			width: 97px;
			height: 22px;
			text-align: center;
			background-color: #006633;
			margin-left: 2px;
			}
			#nav li a:hover{background-color: #006633;
			color: #FFFFFF;
			}
			#content{height: auto;
			width: 740px;
			line-height: 1.5cm;
			padding:10px
			}
			#content p{text-indent: 2em;
			}
			#content h3{font-size: 16px;
			margin: 10px;
			}
			#footer{height: 50px;
			width: 740px;
			line-height: 2em;
			text-align: center;
			background-color: #009966;
			padding: 10px;}
/* 			.d1{border: 10px solid #FF0000;padding:0.5cm 1cm 4cm 2cm}
			.d2{border: 5px;solid gray}
			.d3{margin: 1cm;border: 1px solid gray;} */
		</style>
	</head>
	<body>
		<div id="header"></div>
		<ul id="nav">
			<li><a href="#">首页</a></li>
			<li><a href="#">文章</a></li>
			<li><a href="#">相册</a></li>
			<li><a href="#">Blog</a></li>
			<li><a href="#">论坛</a></li>
			<li><a href="#">帮助</a></li>
		</ul>
		<div id="content">
			<h3>前言</h3>
			<p>第一段内容</p>
			<h3>理解CSS盒子模型</h3>
			<p>第二段内容</p>
		</div>
		<div id="footer">
			<p>关于我们|广告服务|公司招聘|客服中心|QQ留言|网站管理|会员登录|购物车</p>
			<p>Copyright&copy;2012-2013 Zhu Cuimiao.All Rights Reserved</p>
		</div>
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
<!-- 		<div class="d1">
			
			<div class="d2">没有margin</div>
		</div>
		<p>我希望有个如你一般的人，如山间清爽的风，如古城沐浴的光</p>
		<hr />
		<p>可不可以和你在一起我们之间有太多回忆</p>
		<div class="d1">
			<div class="d3">margin 设计为1cm</div>
		</div> -->
	</body>
</html>
